<template>
	<view class="bcg">
		<image class="bcg_bc" mode="widthFix" src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-f73f8baee39c43c2b0082c39a00df379.png"></image>
		<image class="bcg_img" mode="widthFix" src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-53ef95e6f483e1a9c4f787225a9a20aa.png"></image>
		<view style="padding: 0 40rpx">
			<view class="tips">
				<view class="tips_t">申领流程</view>
				<view class="step">
					<view class="step_li">
						<view class="step_li_icon">
							<view class="step_li_icon_line" style="background-color: transparent"></view>
							<image
								style="height: 40rpx; width: 40rpx; border-radius: 50%"
								src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-26dd9afd78865a0b0ca49cb2338e51da.png"
								mode=""
							></image>
							<view class="step_li_icon_line"></view>
						</view>
						<view class="step_li_name">升级会员</view>
					</view>
					<view class="step_li">
						<view class="step_li_icon">
							<view class="step_li_icon_line"></view>
							<image
								style="height: 40rpx; width: 40rpx; border-radius: 50%"
								src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-26dd9afd78865a0b0ca49cb2338e51da.png"
								mode=""
							></image>
							<view class="step_li_icon_line"></view>
						</view>
						<view class="step_li_name">绑定爱车</view>
					</view>
					<view class="step_li">
						<view class="step_li_icon">
							<view class="step_li_icon_line"></view>
							<image
								style="height: 40rpx; width: 40rpx; border-radius: 50%"
								src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-26dd9afd78865a0b0ca49cb2338e51da.png"
								mode=""
							></image>
							<view class="step_li_icon_line"></view>
						</view>
						<view class="step_li_name">免费申领</view>
					</view>
					<view class="step_li">
						<view class="step_li_icon">
							<view class="step_li_icon_line"></view>
							<image
								style="height: 40rpx; width: 40rpx; border-radius: 50%"
								src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-26dd9afd78865a0b0ca49cb2338e51da.png"
								mode=""
							></image>
							<view class="step_li_icon_line" style="background-color: transparent"></view>
						</view>
						<view class="step_li_name">快递到家</view>
					</view>
				</view>
				<view class="tips_title">买白猫严选会员卡，产品免费用！</view>
			</view>
			<view class="next">
				<view style="display: flex; align-items: center">
					<view style="width: 24rpx; height: 24rpx; border-radius: 50%; background-color: #111"></view>
					<view class="next_title">步骤1</view>
				</view>
				<view style="width: 100%; display: flex; justify-content: space-between">
					<view class="next_line"></view>
					<view class="next_content">
						<view v-if="user.car.length != 0 && user.car.plate_number != ''">
							<view class="tips_t">你的爱车已绑定</view>
							<view class="car_num" @click="boundCar">
								<view class="car_num_li" v-for="(i, index) in carNumber" :key="index">{{ i }}</view>
							</view>
							<view class="car_type">
								<view style="font-size: 28rpx; color: #666666">
									<view class="">我的车辆</view>
									<view class="">{{ user.car.car_brand }}</view>
								</view>
								<image src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-956412b1603d694bc4c7dd1e0031b486.png" mode="widthFix"></image>
							</view>
						</view>
						<view @click="boundCar" v-else>
							<view class="tips_t">申领活动前请先绑定车辆信息</view>
							<image
								style="width: 100%"
								src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-fd5a582370e35a4bc636bfe07fe307c8.png"
								mode="widthFix"
							></image>
						</view>
					</view>
				</view>
				<view style="display: flex; align-items: center">
					<view style="width: 24rpx; height: 24rpx; border-radius: 50%; background-color: #111"></view>
					<view class="next_title">步骤2</view>
				</view>
				<view style="width: 100%; display: flex; justify-content: space-between">
					<view class="next_line" style="border: none"></view>
					<view class="next_content">
						<view class="tips_t">活动申领</view>
						<view class="shop" v-for="item in goodsData1" :key="item.id">
							<image :src="item.cover"></image>
							<view class="shop_content">
								<view class="">
									<view style="font-size: 32rpx; color: #111111; font-weight: bold">{{ item.name }}</view>
									<view style="font-size: 24rpx; color: #666666; line-height: 2">{{ item.received }}人已领取</view>
									<view style="font-size: 24rpx; color: #d10801">可领取</view>
								</view>
								<view class="shop_btn" v-if="user.level.level_name === '白猫严选会员'" @click="receivedBtn(item.id)">立即申领→</view>
								<view class="shop_btn" v-else @click="buyMember">购买会员→</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="font-size: 24rpx; color: #3d3d3d; padding-bottom: 60rpx">
				申领规则:节加净(4片装)月度可申领1次，单次最多申领3盒，产品具体发货时间以仓库发货批次时间为准，详情可咨询客服或者拨打客服电话028-68529696，快递费用申领人承担，费用快递到付。
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsData: [],
			carNumber: [],
			goodsData1: [
				{
					id: 14380,
					cover: 'https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-6d45b53b9b60109a71c0e8a6b77709fb.png',
					name: '马孚博士 节加净',
					received: 237
				}
			],
			user: {},
			stepList: [
				{
					name: '第一步',
					id: 1
				},
				{
					name: '第二步',
					id: 2
				},
				{
					name: '第三步',
					id: 3
				},
				{
					name: '第三步',
					id: 3
				}
			]
		};
	},
	computed: {},
	onShow() {
		this.getUserInfo();
	},
	onLoad() {},
	onHide() {
		this.goodsData = [];
	},
	created() {},
	methods: {
		getItem(e, num) {
			let data = { id: e };
			this.$u.post('/item/detail', data).then((res) => {
				res.received = num;
				this.goodsData.push(res);
			});
		},
		// 立即申领
		receivedBtn(e) {
			if (this.user.car.plate_number != '') {
				let data = {
					item_id: e,
					quantity: 1
				};
				this.$u.post('/shopping/buy-now', data).then((res) => {
					if (res.id) {
						this.openPage('/pages/ucp/order-detail', { id: res.id });
					}
				});
			} else {
				uni.$u.toast('你暂未登记车辆信息，即将前往登记页面登记');
				setTimeout(() => {
					this.openPage('/pages/ucp/registration');
				}, 1500);
			}
		},
		buyMember() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		openPage(jumpURL, params = {}) {
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		boundCar() {
			this.openPage('/pages/ucp/registration');
		},
		getUserInfo() {
			this.$u.post('/user/info', {}).then((res) => {
				this.user = res;
				if (this.user.car.length != 0) {
					this.carNumber = [...this.user.car.plate_number];
				}
			}); 
		}
	}
};
</script>

<style lang="scss" scoped>
.shop {
	display: flex;
	justify-content: space-between;
	.shop_content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: calc(100% - 260rpx);
	}
	.shop_btn {
		width: 100%;
		height: 64rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, #d10801 0%, #fca130 100%);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
	}
	image {
		width: 240rpx;
		height: 240rpx;
		border-radius: 8rpx;
	}
}
.car_type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
	image {
		width: 240rpx;
	}
}
.car_num {
	display: flex;
	margin-top: 20rpx;
	.car_num_li {
		margin-right: 10rpx;
		padding: 10rpx 16rpx;
		background-color: #eee;
		border-radius: 12rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}
}
.next {
	// padding: 30rpx 20rpx;
	margin-top: 30rpx;
	.next_title {
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
		margin-left: 20rpx;
	}
	.next_line {
		// height: 300rpx;
		width: 2rpx;
		border: 1rpx dashed #111111;
		margin: 0 10rpx;
	}
	.next_content {
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		width: calc(100% - 40rpx);
		background-color: #fff;
		border-radius: 24rpx;
		margin-bottom: 30rpx;
	}
}
.step {
	padding: 30rpx 20rpx;
	border-radius: 24rpx;
	background-color: #f6f6f6;
	display: flex;
	width: 100%;
	.step_li {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 25%;
		.step_li_icon {
			width: 100%;
			display: flex;
			align-items: center;
			.step_li_icon_line {
				width: calc(100% - 90rpx);
				height: 2rpx;
				background-color: #000000;
			}
		}
		.step_li_name {
			margin-top: 14rpx;
			font-size: 24rpx;
			color: #111111;
			white-space: nowrap; /* 不换行 */
			overflow: hidden; /* 隐藏溢出部分 */
			text-overflow: ellipsis; /* 显示省略号 */
		}
	}
}
.tips {
	width: 100%;
	padding: 20rpx 30rpx;
	border-radius: 24rpx;
	background-color: #fff;

	.tips_c {
		width: 100%;
		background-color: #f6f6f6;
		padding: 24rpx 20rpx;
		border-radius: 24rpx;
	}
	.tips_title {
		font-weight: bold;
		font-size: 28rpx;
		color: #d10801;
		text-align: center;
		margin-top: 20rpx;
	}
}
.bcg {
	width: 100vw;
	min-height: 100vh;
	max-height: 100%;
	background: linear-gradient(220deg, #f5e0e0 40%, #fffbfa 100%);
	.bcg_bc {
		margin-left: 3vw;
		width: 94vw;
	}
	.bcg_img {
		margin-left: 5vw;
		width: 90vw;
		margin-top: -60rpx;
	}
}
.tips_t {
	font-weight: bold;
	font-size: 36rpx;
	color: #111111;
	margin-bottom: 16rpx;
}
</style>
